@layout("/common/_container.html"){

<script src="${ctxPath}/static/js/plugins/jcrop/jquery.Jcrop.js"></script>

<script type="text/javascript">
  jQuery(function($){

    // Create variables (in this scope) to hold the API and image size
    var jcrop_api,
        boundx,
        boundy,

        // Grab some information about the preview pane
        $preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img'),

        xsize = $pcnt.width(),
        ysize = $pcnt.height();
    
    console.log('init',[xsize,ysize]);
    $('#target').Jcrop({
      onChange: updatePreview,
      onSelect: updatePreview,
      aspectRatio: xsize / ysize,
      onRelease:  clearCoords
    },function(){
      // Use the API to get the real image size
      var bounds = this.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];
      // Store the API in the jcrop_api variable
      jcrop_api = this;

      // Move the preview into the jcrop container for css positioning
      $preview.appendTo(jcrop_api.ui.holder);
    });
    $('#coords').on('change','input',function(e){
        var x1 = $('#x1').val(),
            x2 = $('#x2').val(),
            y1 = $('#y1').val(),
            y2 = $('#y2').val();
        jcrop_api.setSelect([x1,y1,x2,y2]);
      });
    function updatePreview(c) {
      if (parseInt(c.w) > 0)
      {
        var rx = xsize / c.w;
        var ry = ysize / c.h;

        $pimg.css({
          width: Math.round(rx * boundx) + 'px',
          height: Math.round(ry * boundy) + 'px',
          marginLeft: '-' + Math.round(rx * c.x) + 'px',
          marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
      }
      $('#x1').val(c.x);
      $('#y1').val(c.y);
      $('#x2').val(c.x2);
      $('#y2').val(c.y2);
      $('#w').val(c.w);
      $('#h').val(c.h);
    };
 // Attach interface buttons
    // This may appear to be a lot of code but it's simple stuff
   
    $('#release').click(function(e) {
      // Release method clears the selection
      jcrop_api.release();
    });
    $('#disable').click(function(e) {
      // Disable Jcrop instance
      jcrop_api.disable();
      // Update the interface to reflect disabled state
      $('#enable').show();
      $('.requiresjcrop').hide();
    });
    $('#enable').click(function(e) {
      // Re-enable Jcrop instance
      jcrop_api.enable();
      // Update the interface to reflect enabled state
      $('#enable').hide();
      $('.requiresjcrop').show();
    });
  
      $('#ar_lock').change(function(e) {
        jcrop_api.setOptions(this.checked?
          { aspectRatio: 4/3 }: { aspectRatio: 0 });
        jcrop_api.focus();
      });
      function clearCoords()
      {
        $('#coords input').val('');
      };
      // Hook up the three image-swapping buttons
     /*  替换图片的操作
     $('#img1').click(function(e) {
        $(this).addClass('active').closest('.btn-group')
          .find('button.active').not(this).removeClass('active');

        jcrop_api.setImage('${ctxPath}/static/img/jcrop/sago.jpg');
        jcrop_api.setOptions({ bgOpacity: .6 });
        return false;
      }); */
  });
</script>
<link rel="stylesheet" href="${ctxPath}/static/css/plugins/jcrop/main.css" type="text/css" />
<link rel="stylesheet" href="${ctxPath}/static/css/plugins/jcrop/demos.css" type="text/css" />
<link rel="stylesheet" href="${ctxPath}/static/css/plugins/jcrop/jquery.Jcrop.css" type="text/css" />
<style type="text/css">

/* Apply these styles only when #preview-pane has
   been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
  display: block;
  position: absolute;
  z-index: 2000;
  top: 10px;
  right: -280px;
  padding: 6px;
  border: 1px rgba(0,0,0,.4) solid;
  background-color: white;

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

/* The Javascript code will set the aspect ratio of the crop
   area based on the size of the thumbnail preview,
   specified here */
#preview-pane .preview-container {
  width: 250px;
  height: 170px;
  overflow: hidden;
}

</style>


<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">

<div class="page-header">
<h1>剪裁预览图片对比</h1>
</div>

  <img src="${ctxPath}/static/uploadImage/LOGO.jpg" width="600px" id="target" alt="[Jcrop Example]" />

  <div id="preview-pane">
    <div class="preview-container">
      <img src="${ctxPath}/static/uploadImage/LOGO.jpg" class="jcrop-preview" alt="Preview" />
    </div>
  </div>
  <form id="coords"
    class="coords"
    onsubmit="return false;"
    action="http://example.com/post.php">

    <div class="inline-labels">
    <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
    <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
    <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
    <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
    <label>W <input type="text" size="4" id="w" name="w" /></label>
    <label>H <input type="text" size="4" id="h" name="h" /></label>
    </div>
  </form>
  <div style="margin: .8em 0 .5em;">
    <span class="requiresjcrop">
      <button id="release" class="btn btn-mini">重置选择</button>
      <button id="disable" class="btn btn-mini">隐藏</button>
    </span>
    <button id="enable" class="btn btn-mini" style="display:none;">显示隐藏操作</button>
  </div>

  <fieldset class="optdual requiresjcrop">
    <legend>切换选项</legend>
    <div class="optlist offset">
      <label><input type="checkbox" id="ar_lock" />锁定纵横比</label> 
    </div>
   
  </fieldset>

  <div class="description">
  <p>
    <b>一个实现预览窗格的示例。</b>
    	显然，最直观的演示，预览窗格已经完成。
		完全在Jcrop之外，使用一个简单的jquery回调。
		这种类型的接口对于创建缩略图非常有用。
		或avatar。onChange事件处理程序用于更新。
		在预览窗格中查看。
  </p>
  </div>

<div class="tapmodo-footer">
	<button class="btn" id="img2">保存剪裁的图片</button>
</div>

<div class="clearfix">请认真核对剪裁的图片，不要重复剪裁保存图片，会造成图片冗余，不利于查找</div>

</div>
</div>
</div>
</div>

@}
